<script>
import { imgUrl } from '@/js/bg';
export default {
  data() {
    return {
      isCollapse: false,
      def: "",
      editableTabs: [{ title: "标签一", name: "2" }],
      editableTabsValue: "",
      imgUrl: imgUrl,
      index:2
    }
  },
  methods: {
    // deleteTabs(targetName, action) {
    //   if (action === "add") {
    //     let newTabName = ++this.tabIndex + "";
    //     this.editableTabs.push({
    //       title: "New Tab",
    //       name: newTabName,
    //       content: "New Tab content",
    //     });
    //     this.editableTabsValue = newTabName;
    //   }
    //   if (action === "remove") {
    //     let tabs = this.editableTabs;
    //     let activeName = this.editableTabsValue;
    //     if (activeName === targetName) {
    //       tabs.forEach((tab, index) => {
    //         if (tab.name === targetName) {
    //           let nextTab = tabs[index + 1] || tabs[index - 1];
    //           if (nextTab) {
    //             activeName = nextTab.name;
    //           }
    //         }
    //       });
    //     }
    //   }
    //   this.editableTabsValue = activeName;
    //   this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    // },
  },
  watch: {},
  mounted() {
    this.def = this.$route.path.replace("/", "");
  },
};
</script>
<template>
  <div>
    <el-container>
      <el-aside width="collapse">
        <el-menu
          :default-active="def"
          unique-opened
          background-color="#304156"
          text-color="#BFCBD9"
          style="border-right: none"
          active-text-color="#409EFF"
          router
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-menu-item index="home">
            <i class="el-icon-eleme" border="none"></i>
            <span>首页页面</span>
          </el-menu-item>
          <el-menu-item index="manager">
            <i class="el-icon-s-home"></i>
            <span>小区管理</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>废品回收</span>
            </template>
            <el-menu-item index="shop">
              <i class="el-icon-office-building"></i>
              <span>门店管理</span></el-menu-item
            >
            <el-menu-item index="courier"
              ><i class="el-icon-guide"></i> <span>驿站管理</span>
            </el-menu-item>
            <el-menu-item index="goods"
              ><i class="el-icon-s-shop"></i>
              <span>商品管理</span></el-menu-item
            >
            <el-menu-item index="2-4"
              ><i class="el-icon-document"></i>
              <span>订单管理</span></el-menu-item
            >
            <el-menu-item index="2-5"
              ><i class="el-icon-delete"></i>
              <span>废品回收管理</span></el-menu-item
            >
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>胖虎甄选</span>
            </template>
            <el-menu-item index="3-1"
              ><i class="el-icon-s-shop"></i> <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="3-2"
              ><i class="el-icon-document"></i> <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="3-3"
              ><i class="el-icon-user-solid"></i>
              <span>售后管理</span></el-menu-item
            >
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-open"></i>
              <span>胖虎家政</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="domestic"
                ><i class="el-icon-s-management"></i>
                <span>家政服务</span></el-menu-item
              >
              <el-menu-item index="4-2"
                ><i class="el-icon-document"></i>
                <span>订单管理</span></el-menu-item
              >
              <el-menu-item index="4-3"
                ><i class="el-icon-phone-outline"></i>
                <span>售后订单</span></el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="5">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-s-flag"></i>
            <span slot="title">骑手管理</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-s-management"></i>
            <span slot="title">家政管理</span>
          </el-menu-item>
          <el-menu-item index="8">
            <i class="el-icon-s-finance"></i>
            <span slot="title">新用户红包</span>
          </el-menu-item>
          <el-menu-item index="9">
            <i class="el-icon-menu"></i>
            <span slot="title">类目管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container width="85%">
        <el-header>
          <div
            style="
              text-align: center;
              margin-top: 17px;
              float: left;
              margin-right: 10px;
            "
            @click="isCollapse = !isCollapse"
          >
            <i class="el-icon-s-fold" v-if="!isCollapse"></i>
            <i class="el-icon-s-unfold" v-if="isCollapse"></i>
          </div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: '/manager' }"
              v-if="this.$route.path == '/manager'"
              >小区管理</el-breadcrumb-item
            >
            <el-breadcrumb-item
              :to="{ path: '/shop' }"
              v-if="this.$route.path == '/shop'"
              >门店管理</el-breadcrumb-item
            >
          </el-breadcrumb>
          <div class="titleR">
            <el-dropdown>
              <span class="el-dropdown-link" >
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" :hide-on-click="false">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>首页</el-dropdown-item>
                <el-dropdown-item>项目地址</el-dropdown-item>
                <el-dropdown-item>Docs</el-dropdown-item>
                <el-dropdown-item divided @click="$route.push('/login')">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div style="clear: both"></div>
        </el-header>
        <el-main>
          <router-view :style="{backgroundImge:`url(${imgUrl[index]})`}"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
}
.el-container {
  height: 100vh;
  overflow: hidden;
}

.el-aside {
  background-color: #304156;
  height: 100%;
  overflow: hidden;
}

.el-header {
  height: 60px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  width: auto;
}

.el-breadcrumb,
.el-button {
  margin-top: 20px;
  float: left;
}
.titleR {
  padding-top: 10px;
  float: right;
}
</style>